<template>
	<view class="personal-info">
		<!-- 新进页面 -->
		<u-cell-group v-if="istype == 1">
			<!-- <view class='ul'>
				<view class='li' @click="custodian_show = true">
					<view  class="u-cell__title ">身份</view>
					<view class=""
						style="display: flex; flex-direction: row;justify-content: flex-end;align-items: center;">
						<input class='catname_s' type="idcard" v-model="userInfo.onsfz" disabled=""
							placeholder="请选择身份" />
						<u-icon name="arrow-right" color="#BEBEBE" size="28rpx" customStyle="margin-left: 10rpx;">
						</u-icon>
					</view>
				</view>
				<u-picker :show="custodian_show" :columns="col_list" keyName="label" @confirm="custodian_list"
					@cancel="custodian_show = false">
				</u-picker>
			</view> -->
			<view class="">
				<view class='ul'>
					<view class='li' @click="custodian_show = true">
						<view  class="u-cell__title ">身份</view>
						<input class='catname' type="text" v-model="userstate.member_type" placeholder="请输入身份" disabled />
					</view>
				</view>
				<view class='ul'>
					<view class='li'>
						<view  class="u-cell__title ">姓名</view>
						<input class='catname' type="text" v-model="userInfo.member_name" placeholder="请输入名字" disabled/>
					</view>
				</view>
				<view class='line'></view>
				<view class='ul'>
					<view class='li' v-if="userInfo.member_idCard != ''">
						<view class="u-cell__title " >身份证号</view>
						<input class='catname' type="text" v-model="userInfo.member_idCard" placeholder="请输入身份证号" disabled/>
					</view>
					<view class='li' v-else>
						<view class="u-cell__title ">身份证号</view>
						<input class='catname' type="text" v-model="userInfo.member_idCard" placeholder="请输入身份证号" disabled/>
					</view>
				</view>
				<view class='line'></view>
				<view class='ul'>
					<view class='li' v-if="userInfo.member_phone != ''">
						<view class="u-cell__title ">手机号</view>
						<input class='catname' type="number" v-model="userInfo.member_phone" placeholder="请输入手机号" disabled
							maxlength="11" />
					</view>
					<view class='li' v-else>
						<view class="u-cell__title ">手机号</view>
						<input class='catname' type="number" v-model="userInfo.member_phone" placeholder="请输入手机号"
							maxlength="11" />
					</view>
				</view>
				<view class='line'></view>
				<view class='ul'>
					<view class='li'>
						<view  class="u-cell__title ">学号/教工号</view>
						<input class='catname' type="text" v-model="userInfo.member_id" placeholder="请输入号码" disabled/>
					</view>
				</view>
				<view class='line'></view>
				
				<view class='ul' v-if="userstate.member_type_bool =='12'">
					<view class='li'>
						<view  class="u-cell__title ">登录密码</view>
						<!-- <input class='catname' type="password" v-model="userInfo.member_password" placeholder="请输入登录密码" /> -->
						<view class="" style="display: flex;flex-direction: row; justify-content: flex-end;flex: 1; align-items: center;">
							<input class='catname_dd' type="password" v-model="userInfo.member_password" placeholder="请输入登录密码"/>
							<view class="uni-icon"  @click="clearIcon">
								<u-icon name="close-circle" size="18"></u-icon>
								<!-- <image src="../../static/1.png" style="width: 30rpx;height: 30rpx;margin-left: 20rpx;" mode=""></image> -->
							</view>
						</view>
					</view>
				</view>
				<view class='line' v-if="userstate.member_type_bool =='12'"></view>

				<view class='ul'>
					<view class='li'>
						<view  class="u-cell__title ">紧急联系人</view>
						<input class='catname' type="text" v-model="userInfo.emergency_contact_name" placeholder="请输入紧急联系人" />
					</view>
				</view>
				<view class='line'></view>
				<view class='ul'>
					<view class='li'>
						<view class="u-cell__title ">紧急联系人电话</view>
						<input class='catname' type="number" v-model="userInfo.emergency_contact_phone" placeholder="请输入紧急联系人电话" maxlength="11"/>
					</view>
				</view>
				<view class='line'></view>
				<view class='ul'>
					<view class='li'>
						<view  class="u-cell__title ">体检报告</view>
					</view>
				</view>
				<view class='ul'>
					<view class='li'>
						<!-- <view @click="upload">
							<image v-if="!userInfo.medical_report" src="../../static/tupian.png" mode=""
								style="width: 100rpx;height: 100rpx;"></image>
							<image v-else :src="userInfo.medical_report" mode="" style="width: 100rpx;height: 100rpx;">
							</image>
						</view> -->
						<view class="upload">
							<u-upload :fileList="fileList1" name="1" width="148rpx" height="148rpx" 
								@afterRead="afterRead" @delete="deletePic" multiple :maxCount="9" />
						</view>
					</view>
				</view>
				<!-- <view class='ul'>
					<view class='li'>
						<view  class="u-cell__title ">头像</view>
					</view>
				</view>
				<view class='ul'>
					<view class='li'>
						@click="imgupload"
						<view >
							<image v-if="userInfo.member_photo == ''" src="../../static/tupian.png" mode=""
								style="width: 100rpx;height: 100rpx;"></image>
							<image :src="userInfo.member_photo" mode="" style="width: 100rpx;height: 100rpx;">
							</image>
						</view>
					</view>
				</view> -->
			</view>
		</u-cell-group>

		<view class="btns flex-between" v-if="isEdit">
			<view class="" @click="edit">编辑</view>
		</view>
		<view class="btns flex-between">
			<view class="" @click="submit">提交审核</view>
		</view>
		<u-modal :show="show" :title="title" :content='content'></u-modal>
	</view>
</template>

<script>
	import {
		upImg,
		getPersonalInfo,audit_save ,bodyCheckImg
	} from '@/common/api';
	export default {
		data() {
			return {
				istype: 1,
				showInsurancePicker: false,
				userInfo: {
					member_name: "",
					member_phone: "",
					member_idCard: "",
					member_photo: "",
					member_password: "",
					member_type: "",
					emergency_contact_name: "",
					emergency_contact_phone: "",
					medical_report: "",
					member_id:uni.getStorageSync('member_id'),
					op:'2',
					venue_id:'237'
				},
				fileList1: [],
				url_phone: '',
				custodian_show: false,
				col_list: [
					[{
							id: 1,
							label: "学生"
						},
						{
							id: 2,
							label: "教职工"
						},
						{
							id: 3,
							label: "家属"
						}
					]
				],
				Modalshow: false,
				title: '您已提交,请等待平台审核',
				content: '审核认证需1-2个工作日。请在登录页右下查询账号审核状态，审核通过后方可预约购票',
				// iswailai: false,
				userstate:{},
				showClearIcon: false,
				fileList1: [],
				url_list: [],
			}
		},
		onLoad() {
			this.ingetPersonalInfo()
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this.url_list.splice(event.index, 1)
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://tmhyyg.nuaa.edu.cn/api/member.index/bodyCheckImg', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							let result = JSON.parse(res.data);
							this.url_list.push(result.data)
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			clearInput(event) {
				this.showClearIcon = true
			},
			offInput(){
				this.showClearIcon = false
			},
			clearIcon() {
				console.log(798798)
				this.userInfo.member_password = ''
				this.showClearIcon = false
			},
			// 身份
			ingetPersonalInfo() {
				getPersonalInfo().then(res => {
					this.userstate = res
					this.userInfo.member_name = res.member_name
					this.userInfo.member_phone = res.member_phone
					this.userInfo.member_idCard = res.member_idCard
					this.userInfo.member_password = res.member_password
					this.userInfo.member_type = res.member_type
					this.userInfo.emergency_contact_name = res.emergency_contact_name
					this.userInfo.emergency_contact_phone = res.emergency_contact_phone
					this.userInfo.member_type=  res.member_type_bool
					this.userInfo.medical_report = res.medical_report
					this.userInfo.member_photo = res.member_photo
					uni.setStorageSync('member_type_bool' , res.member_type_bool)
					console.log(uni.getStorageSync('member_type_bool'))
				});
			},
			groupChange(n) {
				this.userInfo.sex = n
			},
			//身份选择
			custodian_list(e) {
				console.log(e, 'pp[]')
				this.userInfo.onsfz = e.value[0].label
				this.userInfo.onsfz_id = e.value[0].id
				if (e.value[0].id == 3) {
					this.iswailai = true
				} else {
					this.iswailai = false
				}
				this.custodian_show = false
			},
			imgupload() {
				let that = this
				uni.chooseImage({
					count: 1,
					success: e => {
						upImg({
							filePath: e.tempFilePaths[0],
							name: 'file'
						}).then(res => {
							console.log(res, 'iiii')
							that.userInfo.member_photo = res + '?' + new Date().getTime();
						});
					},
					fail: () => {
						uni.$u.toast('请检测权限');
					}
				});
			},
			upload() {
				let that = this
				uni.chooseImage({
					count: 1,
					success: e => {
						bodyCheckImg({
							filePath: e.tempFilePaths[0],
							name: 'file'
						}).then(res => {
							console.log(res, 'iiii')
							that.userInfo.medical_report = res + '?' + new Date().getTime();
						});
					},
					fail: () => {
						uni.$u.toast('请检测权限');
					}
				});
			},
			// upload() {
			// 	uni.chooseImage({
			// 		count: 1,
			// 		success: e => {
			// 			upImg({
			// 				filePath: e.tempFilePaths[0],
			// 				name: 'file'
			// 			}).then(res => {
			// 				this.form.member_photo = res;
			// 			});
			// 		},
			// 		fail: () => {
			// 			uni.$u.toast('请检测权限');
			// 		}
			// 	});
			// },
			submit() {
				this.userInfo.medical_report = this.url_list
				let that = this
				if (!this.userInfo.member_name) {
					uni.$u.toast('请输入姓名');
					return;
				}
				if (!this.userInfo.member_idCard) {
					uni.$u.toast('请输入证件号码');
					return;
				}
				if (!this.userInfo.member_phone) {
					uni.$u.toast('请输入手机号');
					return;
				}
				if (!uni.$u.test.mobile(this.userInfo.member_phone)) {
					uni.$u.toast('请输入正确的手机号');
					return;
				}
				if (this.userInfo.member_type_bool == 12) {
					if (!that.userInfo.member_password) {
						uni.$u.toast('请输入登录密码');
						return;
					}
				}
				if (!this.userInfo.emergency_contact_name) {
					uni.$u.toast('请输入紧急联系人');
					return;
				}
				if (!this.userInfo.emergency_contact_phone) {
					uni.$u.toast('请输入请输入紧急联系人电话');
					return;
				}
				if (!this.userInfo.medical_report) {
					uni.$u.toast('请输入体检报告');
					return;
				}
			
				audit_save(this.userInfo).then(res => {
					uni.showModal({
						title: '您已提交，请等待平台审核',
						content: '审核认证需1-2个工作日。请在登录页右下查询账号审核状态，审核通过后方可预约购票',
						confirmText: "我知道了",
						confirmColor: '#55aaff',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								// 用户点击了确认按钮后的操作
								uni.$u.route({
									type: 'back'
								});
							}
						}
					})
					// setTimeout(() => {
					// 	uni.$u.route({
					// 		type: 'back'
					// 	});
					// }, 1000);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.personal-info {
		background-color: #f7f7f7;
		min-height: 100vh;
		padding-bottom: calc(190rpx + env(safe-area-inset-bottom));

		/deep/.u-cell-group {
			background-color: #fff;
			flex-grow: 0;

			.u-cell-group__wrapper>.u-line {
				display: none;
			}

			.u-cell__body {
				padding: 0 18rpx 0 32rpx;
				height: 110rpx;
			}

			.u-cell__title {
				color: #333;
				font-size: 32rpx !important;
				font-weight: 500;

				&.required {
					&::before {
						content: '*';
						color: #fb2222;
					}
				}
			}

			.u-cell__value {
				color: #999;
			}
		}

		.btns {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
			display: flex;
			justify-content: center;

			view {
				width: 90%;
				height: 80rpx;
				background-color: #3c7efc;
				text-align: center;
				line-height: 80rpx;
				border-radius: 80rpx;
				color: #fff;
			}
		}

		.wrap {
			overflow: hidden;
		}

		.ul {
			width: 92%;
			height: 110rpx;
			margin: auto;
		}

		.li {
			width: 100%;
			height: 110rpx;
			line-height: 110rpx;
			display: flex;
			justify-content: space-between;
		}


		.li .left {
			font-size: 32rpx;
			color: #333;
			text-align: left;
		}


		.catname {
			color: #999;
			margin-left: 10rpx;
			margin-top: 40rpx;
			font-size: 26rpx;
		}

		.catnames {
			color: #999 !important;
			font-size: 26rpx;
			margin-top: 40rpx;
		}
		
		.catname_dd {
			color: #999;
			margin-left: 20rpx;
			font-size: 26rpx;
		}
		
		.uni-icon{
			margin-left: 20rpx;
		}

		.catname_s {
			margin-left: 10rpx;
			color: #999 !important;
			font-size: 26rpx;
		}

		input {
			text-align: right;
		}

		.line {
			width: 100%;
			height: 1rpx;
			background-color: #e6e6e6
		}



	}
	.upload {
		// width: 148upx;
		// height: 148upx;
		// border-radius: 8upx;
		// border: 2upx solid #D8D8D8;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>